<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--    <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>-->
  <!--  <script src="../lib-umd/index.js"></script>-->
  <!--    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>-->
  <script>
  window.tsUtils = "hello world";
  console.log("window.tsUtils", window.tsUtils);
  </script>
  <script src="../lib-umd/index.js" id="tsUtils3.0.3" alias="tu"></script>
  <script src="scriptTest.js"></script>
  <style>
      section {
          border: 1px solid red;
      }

      .test {
          display: inline-block;
          margin: 20px;
          background: bisque;
      }
  </style>
</head>
<body>
<button onclick="clickBtn()">copy btn</button>
<section class="copy">
  <h1>使用copy</h1>
  <div class="test">
    <h2>远程图片</h2>
    <!--        <img crossorigin="anonymous" contenteditable="true" src="https://cdn.jsdelivr.net/gh/mengxinssfd/imgBase@main/img/image-20210218190434007.png"/>-->
    <img crossorigin="anonymous" src="http://img-haodanku-com.cdn.fudaiapp.com/5_1614508885756.jpg"/>
    <p>水电费水电费水电费水电费水电费</p>
  </div>
  <div class="test">
    <h2>本地图片</h2>
    <img contenteditable src="img2.png"/>
    <p>使用copy使用copy使用copy使用copy使用copy</p>
  </div>
</section>
<section class="clipboard">
  <h1>使用clipboard</h1>
  <div class="test">
    <h2>远程图片</h2>
    <img crossorigin="anonymous"
         src="http://cdn.jsdelivr.net/gh/mengxinssfd/imgBase@main/img/image-20210218190434007.png"/>
    <p>水电费水电费水电费水电费水电费</p>
  </div>
  <div class="test">
    <h2>本地图片</h2>
    <img contenteditable src="img2.png"/>
    <p>使用clipboard使用clipboard使用clipboard使用clipboard使用clipboard使用clipboard</p>
  </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8.2.0/dist/polyfill.min.js"></script>
<script>
// console.log(tsUtils.supportClipboardWrite());
// tsUtils.oneByOne("sdfsdf", 1000);
var div = tsUtils.createElement("div", {class: "test", style: {color: "red", border: "1px solid pink"}});
div.innerHTML = "test";
document.body.appendChild(div);
console.log(tsUtils.supportTouch());
/*

    function clickBtn() {
        document.addEventListener('cut', async (event) => {

            // event.clipboardData.setData("text/plain","hello world")
            const mi = new tsUtils.MergeImg();
            await mi.setBg(document.querySelector(".test img").src)

            event.clipboardData.setData("image/png", mi.toDataURL());
            console.log(event);

            event.preventDefault();
        });
        document.execCommand("cut");

    }

    Array.prototype.forEach.call(document.querySelectorAll(".copy .test"), function (el) {
        el.addEventListener("click", async function (e) {
             tsUtils.copy2Clipboard(this).then(function () {
                 console.log("成功");
             });
            // tsUtils.write2Clipboard()
            return
            const img = this.querySelector("img");
            const im = new tsUtils.MergeImg(img.width, img.height);
            await im.addImg(img.src, [0, 0]);
            const blob = await im.toBlob();
            tsUtils.write2Clipboard([
                "hello",
                // blob,
                // "world"
            ],).then(() => console.log('ssssssss'));
        });
    });
    var clipboard = new ClipboardJS('.clipboard .test', {
        target: function (trigger) {
            return trigger;
        },
    });
    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

    async function write() {
        try {
            const data = await fetch(`./img.png`);
            // const data = await fetch('/management/attachments/63848472471ea1095093874a498d25dba07d478a.do')
            const blob = await data.blob();

            await navigator.clipboard.write([
                new Blob(["hello"], {type: "text/"}),
                new ClipboardItem({
                    [blob.type]: blob
                })
            ]);
            console.log('Fetched image copied.');
        } catch (err) {
            console.error(err.name, err.message);
        }
    }

    async function read() {
        try {
            const clipboardItems = await navigator.clipboard.read();
            console.log(clipboardItems);

            for (const clipboardItem of clipboardItems) {

                for (const type of clipboardItem.types) {
                    const blob = await clipboardItem.getType(type);
                    // we can now use blob here
                    console.log(blob);
                }

            }
            const readText = await navigator.clipboard.readText();
            console.log(readText);
        } catch (e) {
            console.error(e);
        }
    }
*/

// read();
new tsUtils.ResponsibilityChain([
  {
    desc: "加载lodash",
    handler: function(value, next) {
      tsUtils.loadScript("https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js", {
        onLoad: next
      });
    }
  },
  {
    desc: "使用lodash",
    handler: function() {
      console.log("lodash isString", _.isString("123123"));
      console.log("lodash isString", _.isObject(new String("123123")));
    }
  }
]).start();

tsUtils.promiseQueue([
  function() {
    return tsUtils.loadScript("https://cdn.jsdelivr.net/npm/@mxssfd/img-zoom@1.2.0/lib-umd/index.min.js");
  },
  function() {
    var iz = new ImgZoom({
      scale: {
        step: 0.1
      },
      triggerEl: ["img:not(.img-zoom-view)", document.querySelector("button")]
    });

    window.addEventListener("keyup", function(e) {
      console.log(e);
      if(e.key === "a") {
        iz.destroy();
      }
    });
  }
]);
</script>
</body>
</html>